<template>
    <div  class="assetcc">
        <div class="head">
            <div class="he">
                <img class="he-img" src="../../assets/image/201.png" alt="">
            </div>
            <div class="xie">
                <p class="home">首页</p>>
                <p class="zhu">资产储存</p>
            </div>
        </div>
        <div class="content">
            <div class="he-li">
                <p class="title" @click="cur=0" :class="{active:cur==0}">全部储存</p>
                <p class="title" @click="cur=1" :class="{active:cur==1}">PEB存储宝</p>
                <p class="title" @click="cur=2" :class="{active:cur==2}">NPC存储宝</p>
            </div>
            <div class="con">
                <ul class="con-tit">
                    <li v-for="(ti,index) in tit" :key="index">{{ti.name}}</li>
                </ul>
                <ul class="con-act">
                    <li v-for="(i,index) in con" :key="index">
                        <p class="id">{{i.id}}</p>
                        <p class="lu">{{i.lu}}</p>
                        <p class="cun">{{i.cun}}</p>
                        <p class="dui">{{i.dui}}</p>
                        <p class="zhi">{{i.zhi}}</p>
                        <button class="btn">{{i.li}}</button>
                    </li>
                </ul>
            </div>
            <div class="cont">
                <van-pagination  v-model="currentPage" :total-items="24" :items-per-page="5"/>
            </div>
        </div>
    </div>
</template>

<script>
import { Pagination } from 'vant';
import Vue from 'vue'
Vue.use(Pagination);
export default {
    name:'assetcc',
    data(){
        return{
            cur:0,
            currentPage: 1,
            tit:[
                {name:'存储ID'},
                {name:'收视率'},
                {name:'定期存现'},
                {name:'实时兑率'},
                {name:'起存值'},
                {name:' '}
            ],
            con:[
                {id:'PEB13007',lu:'13.8%',cun:'3个月',dui:'1:15',zhi:10000,li:'立即存入'},
                {id:'NPC13007',lu:'13.8%',cun:'6个月',dui:'1:2',zhi:60000,li:'立即存入'},
                {id:'PEB13007',lu:'13.8%',cun:'3个月',dui:'1:15',zhi:10000,li:'立即存入'},
                {id:'NPC13007',lu:'13.8%',cun:'6个月',dui:'1:2',zhi:60000,li:'立即存入'},
                {id:'PEB13007',lu:'13.8%',cun:'3个月',dui:'1:15',zhi:10000,li:'立即存入'},
                {id:'NPC13007',lu:'13.8%',cun:'6个月',dui:'1:2',zhi:60000,li:'立即存入'},
                {id:'PEB13007',lu:'13.8%',cun:'3个月',dui:'1:15',zhi:10000,li:'立即存入'},
                {id:'NPC13007',lu:'13.8%',cun:'6个月',dui:'1:2',zhi:60000,li:'立即存入'},
                {id:'PEB13007',lu:'13.8%',cun:'3个月',dui:'1:15',zhi:10000,li:'立即存入'},
                {id:'NPC13007',lu:'13.8%',cun:'6个月',dui:'1:2',zhi:60000,li:'立即存入'},
            ]
        }
    },
    methods:{
        con(){
            this.cur=cur;
        }
    },
}
</script>

<style lang="scss" scoped>
.assetcc{
    width: 100%;
    background: #f3f3f3;
    .head{
        width: 100%;
        background: #fff;
        .he{
            width: 100%;
            height: 100%;
            .he-img{
                width: 100%;
                height: 100%;
            }
        }
        .xie{
            width: 1200px;
            height: 40px;
            margin: 0 auto;
            border-bottom: 2px solid #ccc;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .home{
                color: #ccc;
                font-size: 14px;
            }
            .zhu{
                color: #ff6600;
                font-size: 14px;
            }
        }
    }
    .content{
        width: 1200px;
        margin: 0 auto;
        // background: #fff;
        // border-top: 1px solid #eee; 
        .he-li{
            margin-top: 51px;
            width: 100%;
            // height: 43px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 3px solid #ff6700;
            .title{
                width: 136px;
                height: 43px;
                border-radius: 10px 10px 0 0;
                background: #cdcdcd;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                margin-left: 2px;
                color: #fff;
            }
            .active{
                background: #ff9a00;
                font-weight: 600;
                height: 48px;
            }
        }
        .con{
            width: 100%;
            .con-tit{
                width: 100%;
                height: 52px;
                // padding: 0 50px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background: #333;
                box-sizing: border-box;
                li{
                    width: 100%;
                    height: 52px;
                    color: #ccc;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .con-act{
                width: 100%;
                // padding: 0 50px;
                li{
                    width: 100%;
                    height: 91px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    box-sizing: border-box;
                    background: #fff;
                    font-size: 14px;
                    .id{
                        color: #494949;
                    }
                    .lu{
                        color: #fd6800;
                    }
                    .cun{
                        color: #666;
                    }
                    .dui{
                        color: #ff6700;
                    }
                    .zhi{
                        color: #666;
                    }
                    .btn{
                        outline: none;
                        border: none;
                        font-size: 14px;
                        padding: 15px 27px;
                        background: #ff6700;
                        color: #fff;
                    }
                }
                li:nth-child(2){
                    background: #f6f6f6;
                }
                li:nth-child(4){
                    background: #fff8e9;
                }
                li:nth-child(6){
                    background: #f6f6f6;
                }
                li:nth-child(8){
                    background: #f6f6f6;
                }
                li:nth-child(10){
                    background: #f6f6f6;
                }
            }
        }
        .cont{
            width: 100%;
            height: 40px;
            background: #fff;
            .van-pagination{
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                .van-pagination__item{
                    margin: 0 20px;
                }
            }
        }
    }
}
</style>